<template>
    <!-- 投保记录 -->
    <div>
        <el-row>
            <el-col :span="24" class="base-mian-cell" v-if="recordFlag">
                <div class="base-mian-cell-title clearfix">
                    <div class="left fl">
                        <span class="line">|</span>
                        <span class="tips">投保记录</span>
                    </div>
                    <div class="right fr" @click="changeView">
                        <i class="el-icon-circle-close"></i>
                    </div>
                </div>
                <div class="base-mian-cell-main">
                    <el-table
                            :data="recordData"
                            style="width: 100%">
                        <el-table-column  prop="chdrnum" label="保单号码" min-width="120" show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column prop="crtable" label="险种" min-width="120" show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column  prop="sumins" label="保额/计划" min-width="120" show-overflow-tooltip> 
                        </el-table-column>
                        <el-table-column prop="crrcd" label="生效日期" min-width="160" show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column  prop="riskCessDate" label="终止日" min-width="160" show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column prop="statcode" label="状态" min-width="120" show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column prop="pstatcode" label="保费状态" min-width="120" show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column prop="clamamt" label="保费" min-width="120" show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column prop="oppc" label="加费百分比" min-width="120" show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column prop="insprm" label="加费金额" min-width="120" show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column prop="zmortpct" label="TM" min-width="120" show-overflow-tooltip>
                        </el-table-column>
                    </el-table>
                </div>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
                <div class="pagination">
                    <el-pagination
                            background
                            v-if='paginations.total > 0'
                            :page-sizes="paginations.pageSizes"
                            :page-size="paginations.pageSize"
                            :layout="paginations.layout"
                            :total="paginations.total"
                            :current-page='paginations.pageIndex'
                            @current-change='handleCurrentChange'
                            @size-change='handleSizeChange'>
                    </el-pagination>
                </div>
            </el-col>
        </el-row>


    </div>



</template>
<script>
  import constant from '@/utils/constant';
  import {
    insureHistory
  } from "@/api/underwriting/renewal";
  export default {
    name: 'insuranceRecords',
    data(){
      return{
        recordData:[],
        opinionDialogVisible: false,
        opinionData: [],
        opinionData1: [],
        opinionDialogVisible1: false,
        paginations: {
          total: 0,        // 总数
          pageIndex: 1,  // 当前位于哪页
          pageSize: 10,   // 1页显示多少条
          pageSizes: [5, 10, 15, 20],  //每页显示多少条
          layout: "total, sizes, prev, pager, next, jumper"   // 翻页属性
        },

      }
    },
    props:{
      recordFlag:{
        type: Boolean,
        default: false
      },
      clmnum:{
        type: String,
        default: ""
      }
    },
    mounted(){
      console.log(this.recordFlag);
      // this.recordFlag
    },
    methods:{
      handleCurrentChange(page) {
        this.paginations.pageIndex = page;
        this.search();
      },
      // 照会代码弹框切换每页数据大小
      handleSizeChange() {
        this.paginations.pageSize = pageSize;
        this.search();
      },
      search(){
        debugger
        let that = this;
        let params = {
          "pageSize": this.paginations.pageSize,
          "pageNumber": this.paginations.pageIndex,
          "clmnum": this.clmnum
        }
        that.$emit('showLoading',true);
        insureHistory(params).then(res => {
          that.$emit('showLoading',false);
          if (res.resultCode == constant.SUCCESS && res.data != null) {
            this.recordData = res.data.list;
            this.paginations.total = res.data.total
          }
        }).catch(err => {
        })
      },

      changeView(){
          this.$emit('subRecordFlag',false);
      }
    },
    created() {
      this.search();
    }
  }
</script>
<style lang="less" scoped>
    .underwriting{
        background: #f5f5f5;
        .underwriting-base{
            position: relative;
            .el-tabs__nav{
                padding: 0 20px;
            }
            .base-title{
                background: #fff;
                .item-title{
                    padding: 20px;
                    .item{
                        margin-bottom: 15px;
                        cursor: pointer;
                    }
                }
            }
            .base-mian{

                border: 1px solid #e1e1e1;
                border-radius: 4px;
                background: #f5f5f5;
                .base-mian-cell{
                    margin-top: 10px;
                    background: #fff;
                    .base-mian-cell-title{
                        padding:0  20px;
                        height: 50px;
                        line-height: 50px;
                        border-bottom: 1px solid #e1e1e1;
                        .left{
                            .line{
                                color: #f76767;
                            }
                            .tips{
                                margin-left: 15px;
                            }
                        }
                        .right{
                            padding: 0 20px;
                            cursor: pointer;
                        }
                    }
                    .base-mian-cell-main{
                        padding: 20px;
                    }
                }
            }
        }
        .txt-line{
            color: #68A3FC;
            text-decoration: underline;
            cursor: pointer;
        }
        .txt{
            color: #68A3FC;
            cursor: pointer;
        }
        .complain-lab{
            line-height: 28px;
            text-align: right;
            display: block;
            padding-right: 10px;
            box-sizing: border-box;
        }
        .mb10{
            margin-bottom: 10px;
        }
        .com-title{
            background: #f5f5f5;
            height: 40px;
            line-height: 40px;
            padding: 0 20px;
            .left{
                .line{
                    color: #f76767;
                }
                .tips{
                    margin-left: 15px;
                }
            }
        }
        .check-main{
            padding: 20px 20px 0 20px;
            cursor: pointer;
        }
        .check-info{
            height: 36px;
            padding: 0 20px;
            border: 1px solid #f76565;
            color: #f76565;
            background: #fff;
            cursor: pointer;
        }
        .check-info-def{
            height: 36px;
            padding: 0 20px;
            border: 1px solid #e1e1e1;
            color: #666;
            background: #fff;
            cursor: pointer;
        }
        .edit-main{
            text-align: center;
            margin-top: 15px;
            cursor: pointer;
            button{
                height: 36px;
                padding: 0 30px;
                color: #fff;
                background: #f76565;
                border-radius: 4px;
            }
        }
        .com-txt{
            line-height: 28px;
        }
        .com-txt-line{
            line-height: 28px;
            color: #68A3FC;
            text-decoration: underline;
            cursor: pointer;
        }
        .policy-main{
            margin-top: 10px;
            background: #fff;
            .policy-main-title{
                height: 40px;
                line-height: 40px;
                padding: 0 20px;
                box-sizing: border-box;
                border-bottom: 1px solid #e1e1e1;
                span{
                    margin-left: 8px;
                }
            }
            .policy-main-container{
                padding: 20px;

                .tabs{
                    .tabs-item{
                        div{
                            height: 40px;
                            line-height: 40px;
                            padding: 0 20px;
                            border-radius: 4px 4px 0 0;
                            background: #f2f2f2;
                            text-align: center;
                            cursor: pointer;
                            &.active{
                                background: #f76565;
                                color: #fff;
                            }
                        }
                    }
                }
                .main{
                    padding: 20px;
                    border: 1px solid #e1e1e1;
                    .main-cell{
                        .main-cell-title{
                            height: 50px;
                            line-height: 50px;
                            .line{
                                color: #f76767;
                                margin-right: 8px;
                            }
                        }
                    }
                }
            }
        }
        .com-block{
            padding: 0 10px;
            height: 40px;
            line-height: 40px;
            background: #f5f5f5;
            .com-price{
                color: #FF0000;
            }
        }
        .com-checkbox{
            padding: 0 10px;
            line-height: 36px;
        }
        .com-lab{
            line-height: 36px;
            height: 36px;
            padding: 0 10px;
            text-align: right;
        }
        .com-select{
            height: 36px;
            line-height: 36px;
        }
        .position-re{
            position: relative;
        }
        .position-abs{
            position: absolute;
        }
        .posi-abs-top{
            position: absolute;
            right: 20px;
            top: 10px;
            .lab{
                color: #00C1DE;
                cursor: pointer;
            }
        }
        .position-abs-left{
            position: absolute;
            top: 12px;
            z-index: 10;
            left: 280px;
            color: #68A3FC;
            text-decoration: underline;
            .lab{
                cursor: pointer;
            }
        }
        .position-abs-right{
            position: absolute;
            top: 12px;
            z-index: 10;
            right: 20px;
            color: #68A3FC;
            text-decoration: underline;
            .lab{
                cursor: pointer;
            }
        }
        .pic-select-mian{
            position: relative;
        }
        .select-main{
            width: 50%;
            position: absolute;
            background: #fff;
            border-radius: 4px;
            top: 20%;
            z-index: 1000;
            padding: 20px;
            box-shadow: 0 0 10px #e1e1e1;
            .back-con{
                text-align: center;
                button{
                    height: 30px;
                    padding: 0 20px;
                    background: #fff;
                    border: 1px solid #e1e1e1;
                    border-radius: 4px;
                    cursor: pointer;
                    &:hover{
                        color: #f56c6c;
                        background: #fef0f0;
                        border-color: #fbc4c4;
                    }
                }
            }
        }
        .note-main{
            .note-logo{
                width: 50%;
                margin: 0 auto;
                display: block;
            }
            .tit{
                color: #000;
                font-weight: 600;
            }
            .tip{
                color: #000;
                text-indent: 28px;
                margin-top: 5px;
            }
            .com-note{
                padding: 0 0 0 56px;
                color: #000;
                .com-txt{
                    .lab{

                    }
                    .txt{
                        color: #000;
                        cursor: inherit;
                    }
                }
            }
            .como-title{
                color: #000;
            }
            .com-title-txt{
                color: #000;
                text-indent: 28px;
                margin-top: 5px;
            }
            .com-bom-txt{
                color: #000;
                text-align: right;
                margin-bottom: 5px;
                .sign{
                    display: inline-block;
                    width: 100px;
                    border-bottom: 1px solid #333;
                }
                .si{
                    display: inline-block;
                    width: 35px;
                    border-bottom: 1px solid #333;
                }
            }
            .com-center-tit{
                text-align: center;
                color: #000;
                margin-bottom: 15px;
            }
            .com-center-list{
                li{
                    list-style: circle;
                    color: #000;
                }
            }
            .com-center-bom{
                color: #000;
                margin-top: 10px;
            }

        }
    }
</style>